<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="searchClick"
    />
    <div class="bottom">
      <div class="category">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in categoryList"
            :key="item.id"
            :title="item.name"
            @click="changeCategory(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="pic">
          <img class="picture" v-lazy="currentCategory.wap_banner_url" alt="" />
          <p class="txt">{{ currentCategory.front_name }}</p>
        </div>
        <div class="title">
          <div class="line"></div>
          <div class="text">{{ currentCategory.name }}</div>
        </div>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="items in currentCategory.subCategoryList"
            :key="items.id"
            :icon="items.wap_banner_url"
            :text="items.name"
          />
        </van-grid>
      </div>
    </div>
    <!-- 遮罩层 -->
    <transition name="van-fade">
      <div class="zhezhaocheng" v-show="zhezhao"></div>
    </transition>

    <!-- Popup弹框 -->
    <transition name="van-slide-right">
      <router-view />
    </transition>

  </div>
  
</template>

<script>
import { GetCategory, GetNowCategory } from "../request/api";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      value: "",
      activeKey: "",
      categoryList: [], //分类页左侧数组
      currentCategory: [], //分类页的某一项数组
    };
  },
  created() {
    GetCategory().then((res) => {
      if (res.errno === 0) {
        let { categoryList, currentCategory } = res.data;
        this.categoryList = categoryList;
        this.currentCategory = currentCategory;
      }
    });
  },
  computed: {
    ...mapState({
      zhezhao: (state) => state.show.zhezhao,
    }),
  },
  methods: {
    ...mapMutations({
      onshowzhezhao: "show/onshowzhezhao",
    }),
    searchClick() {
      this.$router.push("/category/popup");
      this.onshowzhezhao(true);
    },
    // 点击左侧栏的每一项
    changeCategory(myid) {
      GetNowCategory({
        id: myid,
      }).then((res) => {
        if (res.errno === 0) {
          let { currentCategory, subCategoryList } = res.data;
          this.currentCategory = currentCategory;
          this.subCategoryList = subCategoryList;
        }
      });
    },
  },
   watch: {
    $route: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          // 刷新当前页
          this.onshowzhezhao(false);
        }
      },
    },
  },
};
</script>
 
<style lang = "less" scoped>
/deep/.category {
  height: 90vh;
  background-color: #f7f8fa;
}
.bottom {
  display: flex;
  background-color: #fff;
  width: 100%;
  .category {
    width: 22%;
    .van-sidebar {
      width: 100%;
    }
  }
  .right {
    flex: 1;
    .pic {
      width: 98%;
      height: 140px;
      position: relative;
      .picture {
        width: 100%;
        height: 100%;
        /* margin: 0 7px; */
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      .txt {
        width: 100%;
        color: #fff;
        position: absolute;
        top: 40%;
        left: 0%;
        text-align: center;
        font-size: 14px;
      }
    }
    .title {
      width: 100%;
      height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      .line {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 60%;
        height: 2px;
        background-color: #999;
      }
      .text {
        width: 30%;
        height: 40px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}
</style>